<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function() {
		$("#btn").hover(function(e) {
			var x = e.pageX;
			var y = e.pageY;
			$("#tip").css("display", "block");
			$("#tip").css("position", "absolute");
			$("#tip").css("top", y);
			$("#tip").css("left", x);
			$("#txt").css("display", "block");
			$("#txt").css("position", "absolute");
			$("#txt").css("top", y);
			$("#txt").css("left", x);
		}, function() {
			$("#tip").css("display", "none");
			$("#txt").css("display", "none");
		});
	});
</script>
</head>
<body>
	<div style="background-color: red; width: 30px; height: 20px" id="btn">BTN</div>
	<div style="filter: alpha(opacity : 50); /*IE*/ -moz-opacity: 0.5; /*Moz+FF*/ opacity: 0.5; background-color: #B3CFFC; width: 200px; height: 200px; display: none; z-index: 9;" id="tip"></div>
	<div id="txt" style="display: none; z-index: 10;">xxxx</div>
</body>
</html>